<template>
    <v-layout v-if="isLoading">
        <div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100%;">
            <v-progress-circular indeterminate size="50" color="blue" width="1"></v-progress-circular>
        </div>
    </v-layout>
    <v-layout v-else>
        <div style="width: 100%;background-color: rgb(239, 239, 239);padding: 10px;display: flex;">
            <div style="background-color: white;width: 100%;padding: 15px;height: 80vh;">
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <div style="display: flex">
                        <el-select size="large" v-model="selected">
                            <el-option v-for="score in scoreNames" :key="score" :value="score">
                                {{ score }}
                            </el-option>
                        </el-select>
                        <div style="margin-left: 10%;">
                            <v-btn height="37px" color="light-blue-accent-3" text="查询" @click="search(selected)"></v-btn>
                        </div>
                    </div>
                    <div>
                        <v-btn height="37px" color="light-blue-accent-3" text="成绩分布"
                            @click="showChart = !showChart"></v-btn>
                    </div>
                </div>
                <v-divider style="margin-top: 2%;"></v-divider>
                <v-container v-if="tableLoading"
                    style="height: 100%;width: 100%;justify-content: center;display: flex;align-items: center;">
                    <v-progress-circular indeterminate size="50" color="blue" width="1">
                    </v-progress-circular>
                </v-container>
                <v-table height="65vh" fixed-header v-else>
                    <thead style="background-color: white;">
                        <tr>
                            <th v-for="header in headers" :key="header"
                                :style="(header === '课序号' || header === '课程名') ? { minWidth: '100px', maxWidth: '100px' } : {}">
                                {{ header }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="s in scores" :key="s.index" style="font-size: small;">
                            <td style="max-width: 100px;">{{ s.index }}</td>
                            <td style="max-width: 100px;">{{ s.name }}</td>
                            <td>{{ s.credit }}</td>
                            <td>{{ s.regular }}</td>
                            <td>{{ s.finalScore }}</td>
                            <td>{{ s.total }}</td>
                            <td>{{ s.point }}</td>
                            <td>{{ s.ranking }}</td>
                        </tr>
                    </tbody>
                    <tfoot v-if="scores.length == 0">
                        <tr>
                            <td colspan="8" align="center">未查询到相关成绩</td>
                        </tr>
                    </tfoot>
                </v-table>
                <div style="width: 100%;display: flex;align-items: center;justify-content: end;padding-right: 5%;"
                    v-if="showGPA">
                    <span style="font-size: small;">GPA:</span>
                    <span style="color: red;margin-left: 1%;">{{ useScoreStore().GPA.gpa }}</span>
                    <span style="font-size: small;margin-left: 3%;">排名:</span>
                    <span style="color: red;margin-left: 1%;">{{ useScoreStore().GPA.ranking }}</span>
                </div>
            </div>
        </div>
        <v-overlay v-model="showChart" style="align-items: center;justify-content: center;">
            <v-sheet width="700px" height="500px" color="white">
                <ScoreChart width="700px" height="500px" />
            </v-sheet>
        </v-overlay>
    </v-layout>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useScoreStore } from '@/stores';
import type { Score } from '@/models/course';
import { message } from '@/utils/message';
import ScoreChart from '@/components/chart/ScoreChart.vue';
const headers = ['课序号', '课程名', '学分', '平时成绩', '期末成绩', '总成绩', '绩点', '排名']
let isLoading = ref(false)
let scores = ref([] as Score[])
let scoreNames = ref(['全部'] as any[])
let selected = ref('全部')
let tableLoading = ref(false)
let showGPA = ref(false)
let showChart = ref(false)
onMounted(() => {
    getCourse()
})
async function getCourse() {
    isLoading.value = true
    try {
        await useScoreStore().init()
        useScoreStore().score.forEach(
            (s) => {
                scoreNames.value.push(s.name)
            }
        )
    }
    catch (error: any) {
        message(error.message, 'error')
    }
    finally {
        isLoading.value = false
    }
}
async function getScore(name?: string) {
    scores.value = useScoreStore().score.filter(s => s.regular !== -1 && s.finalScore !== -1)
    if (name) {
        scores.value = scores.value.filter(s => s.name === name)
    }
}
function search(name?: string) {
    tableLoading.value = true
    if (name === '全部') {
        try {
            useScoreStore().refreshScoreData().then(
                () => {
                    getScore()
                    showGPA.value = true
                }
            )
        }
        catch (error: any) {
            message(error.message, 'error')
        }
        finally {
            tableLoading.value = false
        }
    }
    else {
        getScore(name)
        showGPA.value = false
    }
    tableLoading.value = false
}
</script>